<template>
	<div class="header-container">
		<div class="header-left">
			<div class="menu-button">
				<svg-icon class="svg-icon" icon="arrow-double-left" />
				<div class="line"></div>
				<span class="menu-button-title">返回</span>
			</div>
			<div class="menu-button max">
				<span class="menu-button-title">保存</span>
			</div>
		</div>
		<div class="header-main">
			<span class="title">中国重汽生产质量看板</span>
		</div>
		<div class="header-right">
			<div class="scale-value">
				<span>缩放比例：{{zoom}}%</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			zoom: {
				type: String,
				default: 0
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.header-left {
			width: 30%;
			min-width: 256px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			.max {
				width: 96px;
				text-align: center;
			}

			.menu-button {
				padding: 0 4px;
				height: 32px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgb(247, 247, 247);
				border-radius: 4px;
				margin-right: 16px;
				cursor: pointer;

				&:hover {
					background: rgba(0, 0, 0, 0.1);
				}

				.menu-button-title {
					display: block;
					width: 100%;
					height: 24px;
					line-height: 24px;
					text-align: center;
				}
				
				.line{
					width: 1px;
					height: 16px;
					background-color: #eee;
					margin: 0 6px;
				}

				.svg-icon {
					width: 24px;
					height: 100%;
					color: #000;
				}
			}
		}


		.header-main {
			flex: 1;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				font-size: 14px;
				margin: 0px 4px;
				color: rgb(51, 51, 51);
				text-align: center;
				cursor: text;
			}
		}

		.header-right {
			width: 30%;
			min-width: 256px;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.scale-value {
				height: 32px;
				line-height: 32px;
				text-align: right;
				font-size: 14px;
				color: rgb(51, 51, 51);
			}
		}
	}
</style>
